/// <reference types="@nasl/types" />

namespace nasl.ui {
  @Component({
    title: '表单级联选择',
    description: '一次选择多个相关联的项',
  })
  export class FormCascader<T, V> extends ViewComponent {
    @Prop({
      title: '数据',
    })
    data: CascaderOptions<T, V>['dataSource'];

    @Prop({
      title: '选中值',
    })
    value: CascaderOptions<T, V>['value'];

    @Method({
      title: 'undefined',
      description: '弹出实例。',
    })
    open(): void {}

    @Method({
      title: 'undefined',
      description: '关闭实例。',
    })
    close(): void {}

    @Method({
      title: 'undefined',
      description: '重新加载数据',
    })
    reload(): void {}

    constructor(options?: Partial<FormCascaderOptions<T, V> & FormItemOptions>) {
      super();
    }
  }

  export class FormCascaderOptions<T, V> extends ViewComponentOptions {
    @Prop({
      group: '数据属性',
      title: '数据源',
      description: '展示数据的输入源，可设置为数据集对象或者返回数据集的逻辑',
      docDescription: '数据列表，支持直接放置多层的数据源也支持通过单层的数据和`父节点字段名`或`子节点字段名`构建树形',
    })
    dataSource: nasl.collection.List<T> | { list: nasl.collection.List<T>; total: nasl.core.Integer };

    @Prop({
      group: '数据属性',
      title: '数据类型',
      description: '数据源返回的数据结构的类型，自动识别类型进行展示说明',
      docDescription: '集合类型每一元素的数据类型',
    })
    dataSchema: T;

    @Prop<FormCascaderOptions<T, V>, 'textField'>({
      group: '数据属性',
      title: '文本字段',
      description: '集合的元素类型中，用于显示文本的属性名称',
      docDescription: '集合的元素类型中，用于显示文本的属性名称',
      setter: {
        concept: 'PropertySelectSetter',
      },
    })
    textField: (item: T) => any = ((item: any) => item.key) as any;

    @Prop<FormCascaderOptions<T, V>, 'valueField'>({
      group: '数据属性',
      title: '值字段',
      description: '集合的元素类型中，用于标识选中值的属性',
      docDescription: '集合的元素类型中，用于标识选中值的属性',
      setter: {
        concept: 'PropertySelectSetter',
      },
    })
    valueField: (item: T) => V = ((item: any) => item.value) as any;

    @Prop<FormCascaderOptions<T, V>, 'childrenField'>({
      group: '数据属性',
      title: '子级值字段',
      description: '树形数据子节点字段名，默认为children',
      docDescription: '树形数据子节点字段名，默认为children',
      setter: {
        concept: 'PropertySelectSetter',
      },
    })
    childrenField: (item: T) => nasl.collection.List<any> = ((item: any) => item.children) as any;

    @Prop({
      group: '数据属性',
      title: '父级值字段',
      description: '集合的元素类型中，用于标识父节点的属性',
      docDescription: '集合的元素类型中，用于标识父级字段的属性，支持自定义变更',
      setter: {
        concept: 'PropertySelectSetter',
      },
    })
    parentField: (item: T) => any;

    @Prop({
      group: '数据属性',
      title: '筛选',
      description: '设置是否可以筛选，开启将会显示搜索框。',
      docDescription: '是否可以过滤（搜索），开启将会显示搜索框',
      setter: {
        concept: 'SwitchSetter',
      },
    })
    showSearch: nasl.core.Boolean = false;

    @Prop({
      group: '主要属性',
      title: '占位符',
      description: '为空时显示的占位符文本',
      docDescription: '搜索框为空时提示文本',
    })
    placeholder: nasl.core.String = '请选择';

    @Prop({
      group: '主要属性',
      title: '自动获取焦点',
      description: '设置是否自动获取焦点',
      docDescription: '是否自动获取焦点',
      designerValue: false,
      setter: {
        concept: 'SwitchSetter',
      },
    })
    autoFocus: nasl.core.Boolean = false;

    @Prop({
      group: '交互属性',
      title: '触发方式',
      docDescription: '触发方式',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{ title: '点击' }, { title: '悬浮' }],
      },
    })
    expandTrigger: 'click' | 'hover' = 'click';

    @Prop({
      group: '交互属性',
      title: '可清空',
      description: '设置是否可以清空搜索框，开启后将在有内容时显示清除按钮。',
      docDescription: '开启并在输入框有内容时会显示清除按钮',
      setter: {
        concept: 'SwitchSetter',
      },
    })
    allowClear: nasl.core.Boolean = false;

    @Prop({
      group: '状态属性',
      title: '禁用',
      description: '置灰显示，且禁止任何交互（焦点、点击、选择、输入等）',
      docDescription: '禁用选择器',
      setter: {
        concept: 'SwitchSetter',
      },
    })
    disabled: nasl.core.Boolean = false;



    @Prop({
      group: '数据属性',
      title: '连接符',
      description: '将选中的值以选择的符号作为连接符，转为字符串格式,不可为空值',
      setter: {
        concept: 'EnumSelectSetter',
        options: [{ title: "以', '连接" }, { title: "以'|'连接" }, { title: "以' / '连接" }],
      },
    })
    private join: ',' | '|' | ' / ' = ' / ';

    @Event({
      title: '搜索时',
      description: '监听搜索，返回输入的值	',
    })
    onSearch: (event: V) => any;

    @Event({
      title: '选择完成后',
      description: '选择完成后的回调',
    })
    onChange: (event: { value: V; values: nasl.collection.List<V>; items: nasl.collection.List<T> }) => any;

    @Event({
      title: '获得焦点',
      description: '获得焦点时触发。',
    })
    onFocus: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;

    @Event({
      title: '失去焦点',
      description: '失去焦点时触发。',
    })
    onBlur: (event: {
      cancelBubble: nasl.core.Boolean;
      detail: nasl.core.String;
      layerX: nasl.core.Integer;
      layerY: nasl.core.Integer;
      pageX: nasl.core.Integer;
      pageY: nasl.core.Integer;
      which: nasl.core.Integer;
    }) => any;
  }
}
